<template>
  <el-card>
    <template #header>
      <div class="u619_div">
        <span>班级管理</span>
      </div>
    </template>
    <el-card class="!border-none" shadow="never">
      <el-form
        ref="formRef"
        class="mb-[-16px]"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item>
          <el-input
            class="w-[280px]"
            v-model="queryParams.name"
            placeholder="班级名称"
            clearable
            @keyup.enter="resetPage"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-select
            class="w-[280px]"
            v-model="queryParams.college_id"
            placeholder="关联院校"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <daterange-picker
            class="w-[280px]"
            placeholder="以创建时间范围筛选"
            v-model:startTime="queryParams.created_start_date"
            v-model:endTime="queryParams.created_end_date"
          ></daterange-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">
            <div>
              <span class="search_btn_icon"> </span>
              查询
            </div>
          </el-button>
          <el-button @click="resetParams">
            <div>
              <span class="reset_btn"></span>
              重置
            </div>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never">
      <el-button type="primary" @click="addUser"
        ><span class="add_btn_icon"></span> 添加班级</el-button
      >

      <el-table
        stripe
        class="mt-2"
        size="large"
        v-loading="pager.loading"
        :data="pager.lists"
      >
        <el-table-column label="班级名称" prop="name"></el-table-column>
        <el-table-column label="班级描述" prop="describe"></el-table-column>
        <el-table-column label="关联院系" prop="classes_num">
          <template #default="{ row }">
            {{ row.college.name }}
          </template>
        </el-table-column>
        <el-table-column
          label="关联学生（个）"
          prop="student_num"
        ></el-table-column>
        <el-table-column label="创建时间" prop="created_at"></el-table-column>

        <el-table-column label="操作" min-width="130" fixed="right">
          <template #default="{ row }">
            <div class="flex items-center">
              <el-button
                class="custom-btn"
                plain
                type="primary"
                @click="handleView(row)"
              >
                <span class="view_btn_icon"> </span>
                详情
              </el-button>
              <el-button
                class="custom-btn"
                plain
                type="primary"
                @click="handleEdit(row)"
              >
                <span class="deilt_btn_icon"> </span>
                编辑
              </el-button>

              <el-button
                plain
                class="custom-btn"
                type="danger"
                @click="handleDelete(row.id)"
              >
                <span class="delect_btn_icon"></span>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination
          v-model="pager"
          @change="getLists"
          background="red"
          layout="prev, pager, next, sizes"
        ></pagination>
      </div>
    </el-card>

    <add-user-pop
      v-if="popShow"
      ref="addUserPopRef"
      @close="popClose"
      @confirm="popConfirm"
      :type="popType"
    ></add-user-pop>
  </el-card>
</template>
<script lang="ts" setup name="consumerLists">
import { usePaging } from "@/hooks/usePaging";
import { getClassList, delClass, getDepartmentList } from "@/api/consumer";
import feedback from "@/utils/feedback";
import addUserPop from "../modals/addUserPop.vue";
import { useRequest } from "vue-hooks-plus";

const router = useRouter();

//弹框ref
const addUserPopRef = shallowRef();
const popShow = ref(false);

// 弹窗类型
const popType = ref("");

const queryParams = reactive({
    name: "",
    created_start_date: "",
    created_end_date: "",
    college_id: "",
});

const isSelect = ref<number[]>([]);

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getClassList,
    params: queryParams,
});

// 获取学院列表配置
const { data: options } = useRequest(async () => {
    const _res = await getDepartmentList({ page: 1, limit: 9999 });

    console.log("_res_res_res_res", _res);

    return _res?.data?.map((item: any) => {
        return {
            label: item.name,
            value: item.id,
        };
    });
});
//打开创建用户弹框
const addUser = async () => {
    popShow.value = true;
    await nextTick();
    addUserPopRef.value.open()
};

//删除
const handleDelete = async (id: number[] | number) => {
    await feedback.prompt(`是否确定删除该班级？`, `操作确认`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "textarea",
        inputPlaceholder: "请输入备注",
        callback: async ({ action, value }: any) => {
            if (action == "confirm") {
                console.log("确认了");
                try {
                    await delClass({ id, remark: value });

                    getLists();
                } catch (error) { }
            } else {
            }
        },
        type: "warning",
    });
};

// 编辑
const handleEdit = async (data: any) => {
    popShow.value = true;
    await nextTick();
    addUserPopRef.value.open();
    addUserPopRef.value.setFormData({ ...data });
};

//多选
const handleSelectionChange = (value: any) => {
    isSelect.value = value.map((item: any) => item.id);
};

// 查看详情
const handleView = async (data: any) => {
    popShow.value = true;
    popType.value = "view";
    await nextTick();
    addUserPopRef.value.open();
    addUserPopRef.value.setFormData({ ...data });
};

//弹框关闭
const popClose = () => {
    popShow.value = false;
    popType.value = "";
};

const popConfirm = () => {
    getLists();
    popShow.value = false;
    popType.value = "";
};

onActivated(() => {
    getLists();
});

getLists();

// 路由跳转
const gotoDeatil = () => {
    router.push("/user/student/detail");
};
</script>

<style lang="scss" scoped></style>
